<template>
	<!-- 必到-服务 -->
	<view>
		<!-- 导航 -->
		<u-navbar :is-back="false" title="服务" :height="navHeight" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar>
		<!-- 服务页面内容 -->
		<view>
			<view @tap.stop="serach()" style="width: 93%;margin: auto;height: 66rpx;border: 1rpx solid #FB6112;border-radius: 33rpx;position: relative;">
				<view style="width: 100%;display: flex;align-items: center;">
					<image style="width: 26rpx;height: 32rpx;margin: 0rpx 10rpx 0rpx 15rpx;" src="../../static/gx_img/dw_icon.png"></image>
					<view
						@tap.stop="jumpToSelectCity"
						style="width: 120rpx;font-size: 26rpx;line-height: 66rpx; color: #000000;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
					>
						{{ siteName || '郑州市' }}
					</view>
					<view style="height:34rpx ;width: 1rpx;background-color:#D2D2D2 ;margin-right: 18rpx;"></view>
					<u-icon name="search" color="#D2D2D2" size="28"></u-icon>
					<view style="font-size: 26rpx;color: #E4E4E4;margin-left: 10rpx;">日常保洁</view>
				</view>
				<view
					style="top: 2rpx;right: 2rpx;color: white; position: absolute; border-radius: 32rpx; text-align: center;line-height: 58rpx; width:106rpx;height: 58rpx;background: linear-gradient(180deg, #FB5A0B 0%, #FFAA00 100%);font-size: 26rpx;"
				>
					搜索
				</view>
			</view>

			<view class="subject">
				<!-- 分类 -->

				<view>
					<scroll-view scroll-y="true" :style="{ height: comHeight }" :key="classifyCount" style="background-color: white;">
						<view
							v-for="(item, index) in classificationList"
							:key="index"
							:class="item.businessTypeId == classifyOne ? 'classifyOneSelected' : 'classifyOne'"
							@click="pitchOn(item.businessTypeId, item.icon, item.name)"
							style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width: 196rpx;display: flex;"
						>
							<view class="classifys" style="width: 100%;">{{ item.name }}</view>
						</view>
					</scroll-view>
				</view>
				<!-- 内容 -->
				<view>
					<scroll-view scroll-y="true" :style="{ 'min-height': comHeight }" style="width: 550rpx;">
						<!-- 新服务内容 -->
						<view class="serve_product" v-show="showPro">
							<view v-if="classifyOne == nowBusinessId" style="width: 45%;margin: 0 auto;padding-top: 30rpx;text-align: center;">
								<image src="../../static/icon/huo.png" mode="" style="width: 23rpx;height: 30rpx;line-height: 36rpx;"></image>
								<text style="color: #3F3F3F;font-size: 30rpx;padding-left: 10rpx;line-height: 36rpx;">{{ classifyName }}</text>
							</view>
							<view v-if="classifyOne !== nowBusinessId">
								<view class="serve_product_img" v-if="nowImg"><image :src="nowImg" mode="widthFix"></image></view>
								<view class="serve_product_title" v-if="classifyOne">
									<u-divider border-color="#C9C9C9" color="#363636">{{ classifyName }}</u-divider>
								</view>
							</view>
							<view class="serve_product_content" v-if="flowList && isShowData == true">
								<view v-for="(item, index) in flowList" :key="index" class="serve_product_content_span" @tap="serviceList(item)">{{ item.name }}</view>
							</view>
						</view>
						<u-loading v-show="!showPro" :style="{ height: comHeight }" class="loading" mode="circle" color="#F29423" size="42"></u-loading>
						<!-- 新服务内容结束 -->
					</scroll-view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import amap from '../../components/map/amap-wx.js';
export default {
	components: {},
	data() {
		return {
			background: {
				backgroundColor: '#ffffff'
			},
			classificationList: [],
			classifyOne: null,
			classifyName: '',
			flowList: [],
			flowCount: 0,
			isShowData: true,
			token: '',
			navHeight: 0,
			comHeight: 0,
			nowImg: '', // 当前分类图片
			nowBusinessId: '', //热门分类id
			showPro: true,
			siteName: '', //地址
			userId: '',
			clickNum: 0 //判断进入次数
		};
	},
	onLoad(option) {
		var that = this;
		if (option.id) {
			var id = option.id;
			uni.setStorageSync('parentId', id);
		}
		var parentId = option.parentId;
		if (parentId) {
			uni.setStorageSync('parentId', parentId);
			uni.navigateTo({
				url: '../login/login'
			});
			return false;
		}
		if (uni.getStorageSync('token')) {
			var userInfo = JSON.parse(uni.getStorageSync('userinfo'));
			this.userId = userInfo.userId;

			this.token = uni.getStorageSync('token');
		}

		var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, width, height, right } = menuButtonInfo;
		uni.getSystemInfo({
			success: res => {
				const { statusBarHeight } = res;
				const margin = top - statusBarHeight;
				var navHeight = height + statusBarHeight + margin * 2;
				that.navHeight = height + margin * 2;
				that.comHeight = res.windowHeight - navHeight - 36 + 'px';
			}
		});
	},
	onShow() {
		this.token = uni.getStorageSync('token');
		if (!this.token) {
			uni.hideShareMenu();
		} else {
			uni.showShareMenu();
		}
		this.getClassifyNoe();
		this.getLocationInfo();
	},
	methods: {
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
			}
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'common/insertShareLog'
			};
			let data = {};
			this.http.httpTokenRequest(opts, data).then(res => {
				//分享日志，不需要处理
			});
			return {
				title: '必到清洗季，新客享福利',
				path: '/pages/login/login?id=' + this.userId + '&jumpType=' + 2
				// path: '/pages/service/service?id=' + this.userId
			};
		},
		// 分享到朋友圈
		// onShareTimeline() {
		// 	return {
		// 		title: '必到清洗季，新客享福利',
		// 		query:'parentId='+this.userId
		// 	};
		// },
		//跳转选择城市
		jumpToSelectCity: function() {
			if (!this.token) {
				this.islogin();
				return;
			} else {
				uni.navigateTo({
					url: '/pageageA/home/selectCity/selectCity?cityName=' + this.siteName
				});
			}
		},
		getLocationInfo() {
			var _this = this;
			uni.getStorage({
				key: 'siteName',
				success: res => {
					_this.siteName = res.data;
				},
				// fail: resd => {
				// 	//2. 获取地理位置
				// 	uni.getLocation({
				// 		type: 'wgs84',
				// 		success(res) {
				// 			let latitude, longitude;
				// 			latitude = res.latitude.toString();
				// 			longitude = res.longitude.toString();
				// 			var myAmapFun = new amap.AMapWX({
				// 				key: _this.http.mapVxKey
				// 			});
				// 			myAmapFun.getRegeo({
				// 				location: '' + longitude + ',' + latitude + '', //location的格式为'经度,纬度'
				// 				success: function(e) {
				// 					_this.siteName = e[0].regeocodeData.addressComponent.city; //城市
				// 					uni.setStorage({
				// 						key: 'siteName',
				// 						data: e[0].regeocodeData.addressComponent.city
				// 					});
				// 				},
				// 				fail: function(info) {}
				// 			});
				// 		},
				// 		fail(resd) {}
				// 	});
				// }
			});
		},
		serach() {
			uni.navigateTo({
				url: '../../pageageA/home/search/search'
			});
		},
		// 登录判断
		islogin() {
			uni.showModal({
				title: '提示',
				content: '查看服务内容需要先进行登录操作。',
				confirmText: '去登录',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					} else if (res.cancel) {
					}
				}
			});
			return;
		},
		//选择一级分类
		pitchOn(classifyId, icon, name, isHot) {
			if (classifyId == this.classifyOne) {
				//点击当前服务
				return false;
			} else {
				this.showPro = false;
				this.classifyOne = classifyId;
				this.classifyName = name;
				this.nowImg = icon;
				this.getClassifyTow();
			}
		},
		serviceList(item) {
			if (!this.token) {
				this.islogin();
			} else {
				switch (item.chargeType) {
					case 1:
						// uni.navigateTo({
						// 	url: '/pageageA/service/serviceDetail?titleName=' + item.name + '&redirectId=' + item.businessId + '&chargeType=' + item.chargeType
						// });
						uni.navigateTo({
							url: '../../pageageA/placeOrder/selectService?businessId=' + item.businessId
						});
						break;
					case 2:
						// uni.navigateTo({
						// 	url: '/pageageA/service/serviceDetail?titleName=' + item.name + '&redirectId=' + item.businessId + '&chargeType=' + item.chargeType
						// });
						uni.navigateTo({
							url: '../../pageageA/placeOrder/selectService?businessId=' + item.businessId
						});
						break;
					case 3:
						// uni.navigateTo({
						// 	url: '/pageageA/service/serviceDetail?titleName=' + item.name + '&redirectId=' + item.businessId + '&chargeType=' + item.chargeType
						// });
						uni.navigateTo({
							url: '../../pageageA/placeOrder/selectService?businessId=' + item.businessId
						});
						break;
					case 4:
						uni.navigateTo({
							url: '../../pageageA/home/almightyNanny/almightyNanny?titleName=' + item.name + '&redirectId=' + item.businessId
						});
						break;
					default:
						break;
				}
			}
		},
		//获取一级分类
		getClassifyNoe: function() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'business/getBusinessType'
			};
			let data = {};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					this.classificationList = res.data;
					if (res.data) {
						if (this.clickNum == 0) {
							this.clickNum = this.clickNum + 1;
							this.classifyOne = res.data[0].businessTypeId;
							this.nowBusinessId = res.data[0].businessTypeId;
							this.classifyName = res.data[0].name;
							if (this.flowList.length != 0) {
								// this.$refs.uWaterfall.clear();
							}
						}
						this.getClassifyTow();
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		//获取二级分类
		getClassifyTow: function() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'business/getBusiness'
			};
			let data = {
				businessType: this.classifyOne
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					if (res.data.length != 0) {
						this.flowList = res.data;
						setTimeout(()=>{
							this.isShowData = true;
						},1000)
					} else {
						this.isShowData = false;
					}
					this.showPro = true;
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		}
	}
};
</script>

<style>
/* 导航 */
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.subject {
	display: flex;

	flex-direction: row;
}

.classify {
	height: calc(100vh - var(--status-bar-height) - 50px);
}

.classifyOneSelected {
	width: 196rpx;
	padding-top: 32rpx;
	padding-bottom: 34rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #fd5e06;
	opacity: 1;
	background-color: #ffffff;
}

.classifyOneSelected .classifys {
	border-left: 6rpx solid #fd5e06;
	text-align: center;
}

.classifyOne {
	width: 196rpx;
	font-size: 30rpx;
	padding-top: 32rpx;
	padding-bottom: 34rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3f3f3f;
	opacity: 1;
}

.classifyOne .classifys {
	/* border-left: 2rpx solid #FFFFFF; */
	text-align: center;
	font-size: 30rpx;
	color: #3f3f3f;
}

.typeface1 {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #3f3f3f;
	opacity: 1;
}

.typeface2 {
	margin-top: 10rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666666;
	opacity: 1;
}

/* 新服务样式 */
.serve_product {
	width: 92%;
	margin: 0 auto;
}

.serve_product .serve_product_img {
	width: 100%;
	margin-top: 20rpx;
}

.serve_product .serve_product_img image {
	width: 100%;
	/* height: 200rpx; */
}

.serve_product .serve_product_title {
	width: 60%;
	margin: 0 auto;
	padding-top: 20rpx;
}

.serve_product .serve_product_content {
	margin-top: 24rpx;
	/* padding: 5rpx; */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.serve_product .serve_product_content .serve_product_content_span {
	line-height: 56rpx;
	text-align: center;
	/* 	background-color: #f6f6f6; */
	color: #818181;
	border-radius: 5rpx;
	margin: 10rpx 10rpx;
	padding: 0 12rpx;
}

.loading {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 新服务样式结束 */
</style>
